<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="application/javascript" src="/static/js/common.js"></script>
    <title>产品销售列表</title>
</head>
<body class="app-body">
<div class="app-panel">
    <div class="app-search">
        <div class="app-search">
            <fieldset class="layui-elem-field">
                <legend>查询</legend>
                <div class="layui-field-box">
                    <form class="layui-form" >
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">产品名称</label>
                                <div class="layui-input-block">
                                    <select name="productUuid" id="_productUuid">
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">配送公司</label>
                                <div class="layui-input-block">
                                    <select name="deliveryUuid" id="_deliveryUuid">
                                        <option value="">请选择</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">客户名称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="customerName" class="layui-input" >
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">销售时间</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="salesTime" class="layui-input _search_time" placeholder=" - ">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-btn-group">
                                    <button class="layui-btn" lay-submit lay-filter="_form_search">查询</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>
        </div>
    </div>
    <div class="app-context">
        <table class="layui-table" id="_table" lay-filter="_table_filter"></table>
    </div>
</div>
<!-- 顶部工具栏 -->
<script type="text/html" id="toolbar">
    <div class="layui-btn-group">
        <button type="button" class="layui-btn layui-btn-normal" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>销售</button>
        <button type="button" class="layui-btn" lay-event="export"><i class="layui-icon layui-icon-release"></i>导出</button>
    </div>
</script>

<script type="application/javascript" th:inline="none">
    layui.use(['table', 'utils', 'axiosUtil', 'form', 'laydate'], function () {
        var $ = layui.$,
            table = layui.table,
            utils = layui.utils,
            axiosUtil = layui.axiosUtil,
            form = layui.form,
            laydate = layui.laydate,
            layer = parent.layer;

        //预加载
        axiosUtil.axios_select({
            itemArr: [{item: "#_productUuid", url: "/product/select"}, //产品名称
                {item: "#_deliveryUuid", url: "/company/delivery/select"} //配送公司
            ],
            renderItem: form
        });

        //日期范围
        lay('._search_time').each(function(){
            laydate.render({
                elem: this
                ,trigger: 'click'
                ,range: "~"
            });
        });

        var _table = table.render({
            elem: '#_table',
            url : '/order/sales/listData',
            page : true,
            height : "full-200",
            request: {
                pageName: 'current' //页码的参数名称，默认：page
                ,limitName: 'size' //每页数据量的参数名，默认：limit
            },
            toolbar: "#toolbar",
            defaultToolbar: ['filter', {
                title: '刷新' //标题
                ,layEvent: 'refresh' //事件名，用于 toolbar 事件中使用
                ,icon: 'layui-icon-refresh' //图标类名
            }],
            cols : [[
                {field: 'productName', title: '产品名称', align: 'left'},
                {field: 'deliveryName', title: '配送公司', align: 'left'},
                {field: 'supplierName', title: '供应商名称', align: 'left'},
                {field: 'makerName', title: '制造商名称', align: 'left'},
                {field: 'customerName', title: '客户名称', align:'center'},
                {field: 'standard', title: '规格', align:'center'},
                {field: 'salePrice', title: '销售价格(￥)', align:'center'},
                {field: 'saleTotalPrice', title: '销售总金额(￥)', align:'center'},
                {field: 'salesTime', title: '销售时间', align:'center'}
            ]]
        });

        //监听头部工具栏事件
        table.on('toolbar(_table_filter)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.open({
                        type : 2,
                        title: '产品销售',
                        shadeClose: true,
                        area : ['800px', '80%'],
                        content: "/html/repertory/sales?select=true",
                        btn: ['保存', '取消'],
                        yes: function (index, layero) {
                            var form = layer.getChildFrame('form', index);
                            var field = utils.formValue(form);
                            axiosUtil.axios_post("/order/sales/add", field, function () {
                                layer.close(index);
                                layer.msg("操作成功");
                            });
                        },btn2: function(index, layero){
                            layer.close(index);
                        }
                        ,end : function(index, layero){
                            axiosUtil.reload(_table);
                            return false;
                        }
                    });

                    break;
                case 'export':

                    layer.msg('删除');
                    break;
                case 'refresh':
                    axiosUtil.reload(_table);
                    break;
            }
        });

        form.on('submit(_form_search)', function(data){
            _table.reload({
                where: data.field
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

    })

</script>
</body>
</html>
